<template>
  <div>
    <h1>不使用keep-alive</h1>
    <p>beforeRouteEnter --> created --> mounted --> destroyed</p>
    <h1>使用keep-alive</h1>
    <div>
      <p>
        beforeRouteEnter --> created --> mounted --> activated --> deactivated
      </p>
      <p>beforeRouteEnter --> activated --> deactivated</p>
    </div>
    <child></child>
  </div>
</template>

<script>
import child from './components/B';
export default {
  name: 'vueLife',
  components: {
    child
  },
  data() {
    return {
      isFirstEnter: false
    };
  },
  beforeCreate() {
    console.log('parent-beforeCreate====');
  },
  created() {
    console.log('parent-created====');
  },
  beforeMount() {
    console.log('parent-beforeMount====');
  },
  mounted() {
    // 只有第一次进入或者刷新页面后才会执行此钩子函数,使用keep-alive后（2+次）进入不会再执行此钩子函数
    // isFirstEnter 用来标记是否第一次进入该页面，以防止用户在详情页手动刷新页面，回到该页面后不再请求数据
    this.isFirstEnter = true;
    console.log('parent-mounted====');
  },
  beforeUpdate() {
    console.log('parent-beforeUpdate====');
  },
  updated() {
    console.log('parent-updated====');
  },
  beforeDestroy() {
    console.log('parent-beforeDestroy====');
  },
  destroyed() {
    console.log('parent-destroyed====');
  },
  activated() {
    console.log('parent-activated====');
    if (this.$route.meta.isNeedRefresh || this.isFirstEnter) {
      // 如果 isNeedRefresh 是 true，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
    }
    this.isFirstEnter = false;
    this.$route.meta.isNeedRefresh = false;
  },
  deactivated() {
    console.log('parent-deactivated====');
  },
  beforeRouteEnter(to, from, next) {
    console.log('parent-beforeRouteEnter=====', from, to);
    // 利用路由元信息中的 meta 字段设置变量，方便在各个位置获取。这就是为什么在 meta 中定义 isNeedRefresh。
    // 当从详情页返回时，将 isNeedRefresh 设为 false，表示不刷新数据
    to.meta.isNeedRefresh = from.name === '/index';
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log('parent-beforeRouteLeave=====', from, to);
    next();
  }
  /**
   * keep-alive 跟 路由守卫配合使用时，【注意next的执行时机】
   * 当利用了路由守卫后的情况
   * 1: 初次渲染这个页面时：
   * …=>
   * beforeRouteEnter()=>
   * activated()=>
   * next()(beforeRouteEnter中的方法)=>
   * …=>
   * beforeRouteLeave()
   * =>deactivated()。
   * 2: 再次进入这个页面
   * …=>
   * beforeRouteEnter()=>
   * next()(beforeRouteEnter中的方法)=>
   * activated()=>
   * …=>
   * beforeRouteLeave()=>
   * deactivated()。
   */
};
</script>

<style scoped></style>
